﻿@{
    ViewBag.Title = "Thống kê Giáo trình theo NXB";
    AjaxOptions aj = new AjaxOptions
    {
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "KetQuaThK",
        LoadingElementId = "loading-icon",
        OnFailure = "AjaxFailure",
        OnBegin = "AjaxBegin",
        OnComplete = "AjaxComplete",
        HttpMethod = "POST"
    };
}
@using (Ajax.BeginForm(aj))
{
    <header class="panel-heading">
        <h3 style="text-align: center; font-weight: bold">Thống kê Giáo trình theo Nhà xuất bản</h3>
    </header>
    <div class="panel-body">
        <div class="form-horizontal">
            <div class="col-md-6">
                <div>
                    <label class="control-label col-md-3">Từ ngày: </label>
                    <div class="col-md-9">
                        <div class="form-group">
                            <div class='input-group date' id='TuNgaydatetimepicker'>
                                <input type='text' class="form-control" data-date-format="MM/DD/YYYY" name="TuNgay" placeholder="Chọn ngày bắt đầu" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <label class="control-label col-md-3">Đến ngày: </label>
                    <div class="col-md-9">
                        <div class="form-group">
                            <div class='input-group date' id='DenNgaydatetimepicker'>
                                <input type='text' class="form-control" data-date-format="MM/DD/YYYY" name="DenNgay" placeholder="Chọn ngày kết thúc" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>

                    </div>
                </div>
                @*<div>
                        <label class="control-label col-md-3">Nhà xuất bản: </label>
                        <div class="col-md-9">
                            <div class="form-group">
                                @Html.DropDownList("NhaXuatBan", (SelectList)ViewBag.NhaXuatBan, new { @class = "form-control", id = "NhaXuatBan" })
                            </div>
                        </div>
                    </div>*@
            </div>
            <div style="text-align:center">
                <input type="submit" value="Thống kê" class="btn btn-danger" id="btThongKe" />
            </div>
        </div>
    </div>
}

        <span name="Error"></span>
        <link href="~/Content/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
        <script src="~/Scripts/moment.js"></script>
        <script src="~/Scripts/bootstrap-datetimepicker.js"></script>
        <script src="~/Scripts/chart/highcharts.js"></script>
        <script src="~/Scripts/chart/highcharts-3d.js"></script>
        <script src="~/Scripts/chart/themes/grid-light.js"></script>
        <script src="~/Scripts/chart/modules/exporting.js"></script>

        <script>
            $(document).ready(function () {
                $.validator.methods["date"] = function (value, element) { return true; }

                $('form').validate({
                    rules: {
                        TuNgay: {
                            required: true,
                            date: true,

                        },
                        DenNgay: {
                            required: true,
                            date: true,
                        }
                    },
                    messages: {
                        TuNgay: {
                            required: "",
                            date: "Không đúng định dạng ngày"
                        },
                        DenNgay: {
                            required: "",
                            date: "Không đúng định dạng ngày"
                        }
                    }
                });
                $('#TuNgaydatetimepicker').datetimepicker({
                });
                $('#DenNgaydatetimepicker').datetimepicker({
                });
            })
        </script>

        <div id="KetQuaThK" class="clear"></div>
